import { ExpertSceneList } from '@/api/expert';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';

export default function ProfessionalScenes() {
  const { data: list } = useRequest(ExpertSceneList);

  return (
    <>
      {list?.map((item) => (
        <View
          key={item.id}
          className=' flex p-4 bg-white rounded-lg mb-4'
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/professional/scenes/detail?id=${item.id}`,
            });
          }}
        >
          <Image
            className='w-[240px] h-[176px] rounded-lg mr-3 bg-gary2'
            src={item.img}
            mode='aspectFill'
          />
          <View className='flex-1'>
            <Text className=' block text-[36px] text-black font-bold'>
              {item.name}
            </Text>

            <Text className='block text-xs mt-2'>{item.description}</Text>
          </View>
        </View>
      ))}
    </>
  );
}
